<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-for -->
<template>
  <!-- 批量分析组件 -->

  <div class="total-cotnet header">
    <div class="line-components">
      <div class="divider" />
      <el-button class="changeBtn">且</el-button>
      <div class="divider" />
    </div>
    <el-form v-model="formData" style="flex: 1" @submit.native.prevent>
      <div class="rule-label">
        <!-- 头部信息 -->
        <div class="small-head">
          <div>
            <el-button
              type="primary"
              :icon="showAttr ? 'el-icon-minus' : 'el-icon-plus'"
              class="small-head-btn"
              @click="showAttr = !showAttr"
            />实体属性
          </div>
          <el-button icon="el-icon-circle-plus" type="text" @click="addAttr">添加</el-button>
        </div>
        <!-- 内容区域 -->
        <div v-show="showAttr && formData.property" class="floor3">
          <div v-if="formData.property.conditions.length" class="total-cotnet">
            <!-- 分隔线 -->
            <div v-if="formData.property.conditions.length > 1" class="line-components">
              <div class="divider" />
              <el-button
                class="changeBtn"
                @click="changeLogic(formData.property)"
              >{{ formData.property.relation === 'and' ? '且' : '或' }}</el-button>
              <div class="divider" />
            </div>
            <!-- 右侧逻辑 -->
            <div style="flex: 1; margin-left: 20px">
              <div
                v-for="(item, index) in formData.property.conditions"
                :key="index"
                class="total-cotnet"
                style="width: 100%; margin-bottom: 20px"
              >
                <!-- 分隔线 -->
                <div v-if="item.conditions.length > 1" class="line-components">
                  <div class="divider" />
                  <el-button
                    class="changeBtn"
                    @click="changeLogic(item)"
                  >{{ item.relation === 'and' ? '且' : '或' }}</el-button>
                  <div class="divider" />
                </div>
                <div style="width: 100%; margin-left: 20px">
                  <div v-for="(it, idx) in item.conditions" :key="it.field+idx" class="margin20">
                    <el-form-item :prop="it.condition">
                      <el-select
                        v-model="it.field"
                        filterable
                        placeholder="请选择"
                        style="margin-right: 15px; width: 150px"
                        @change="
                          (val) => {
                            confirmFirst(val, index, idx)
                          }
                        "
                      >
                        <el-option
                          v-for="i in formData.transferArray.attrList"
                          :key="i.value"
                          :label="i.label"
                          :value="i.value"
                        />
                      </el-select>
                      <el-select
                        v-model="it.operator"
                        filterable
                        placeholder="请选择"
                        style="margin-right: 15px; width: 150px"
                        @change="
                          (val) => {
                            confirmSec(val, index, idx)
                          }
                        "
                      >
                        <el-option
                          v-for="i in formData.transferArray.secondList[index].lists[idx].list"
                          :label="i.label"
                          :value="i.value"
                        />
                      </el-select>
                      <!-- 枚举类型 -->
                      <el-select
                        v-if="it.isEnum === 1 && it.operator!='ref_in' && it.operator!='ref_not_in' && it.useType!='input'"
                        v-model="it.param"
                        filterable
                        :multiple="it.useType != 'normal'"
                        style="width: 300px"
                        clearable
                        @change="handleChangeInput"
                      >
                        <el-option
                          v-for="i in formData.transferArray.enumList[index].lists[idx].list"
                          :label="i.label"
                          :value="i.value"
                        />
                      </el-select>
                      <!-- 相等或者正则      -->
                      <el-input
                        v-else-if="it.useType === 'input'"
                        v-model="it.param"
                        style="width: 300px"
                        @input="handleChangeInput"
                      />
                      <!-- 包含或者不包含 -->
                      <MultipInput
                        v-else-if="it.useType === 'a-select'"
                        :tags="it.param"
                        style="width: 300px"
                        @emitInput="(val) => emitInput(val, index, idx)"
                      />

                      <!-- 关联资源表 -->
                      <el-select v-else v-model="it.refResource" filterable style="width: 300px">
                        <el-option
                          v-for="i in formData.transferArray.resourceList"
                          :label="i.label"
                          :value="i.value"
                        />
                      </el-select>
                    </el-form-item>
                    <div style="display: flex; align-items: center">
                      <!--   <el-button
                        v-if="idx === item.conditions.length - 1"
                        icon="el-icon-circle-plus"
                        type="text"
                        @click="addContion(index)"
                        >添加</el-button
                      >-->
                      <i
                        class="el-icon-close"
                        style="margin-left: 10px"
                        @click="removeAttrConditon(index, idx)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 实体行为部分 -->
      <div class="rule-label">
        <!-- 头部信息 -->
        <div class="small-head">
          <div>
            <el-button
              type="primary"
              :icon="showAction ? 'el-icon-minus' : 'el-icon-plus'"
              class="small-head-btn"
              @click="showAction = !showAction"
            />实体行为
          </div>
          <el-button icon="el-icon-circle-plus" type="text" @click="addHappend">添加</el-button>
        </div>
        <!-- 内容区域 -->
        <div v-show="showAction" class="floor3">
          <div v-if="formData.action.conditions.length" class="total-cotnet">
            <!-- 分隔线 -->
            <div v-if="formData.action.conditions.length > 1" class="line-components">
              <div class="divider" />
              <el-button class="changeBtn" @click="changeLogic(formData.action)">
                {{
                  formData.action.relation === 'and' ? '且' : '或'
                }}
              </el-button>
              <div class="divider" />
            </div>
            <!-- 右侧逻辑 -->
            <div style="margin-left: 20px">
              <div v-for="(item, index) in formData.action.conditions" style="margin-bottom: 30px">
                <!-- 第一行 -->
                <div class="happend">
                  <!-- 字母 -->
                  <el-button class="number-tips">{{ letters[index] }}</el-button>
                  <!-- 时间临时选择 -->
                  <el-form-item :prop="item.temptime">
                    <el-select
                      v-model="item.temptime"
                      filterable
                      placeholder="请选择"
                      style="margin-right: 15px; width: 230px"
                    >
                      <el-option v-for="i in timeList" :label="i.label" :value="i.value" />
                    </el-select>
                  </el-form-item>
                  <div v-if="item.temptime === 'auto'">
                    <span>近</span>
                    <el-select
                      v-model="item.time"
                      filterable
                      placeholder="请选择"
                      style="margin: 0 10px; width: 100px"
                    >
                      <el-option v-for="i in 30" :label="i" :value="i + 'd'" />
                    </el-select>
                    <span>天</span>
                  </div>
                  <el-form-item prop="item.done">
                    <el-select
                      v-model="item.done"
                      filterable
                      placeholder="请选择"
                      style="margin: 0 15px; width: 100px"
                    >
                      <el-option label="做过" :value="true" />
                      <el-option label="未做过" :value="false" />
                    </el-select>
                  </el-form-item>
                  <!-- 选择实体行为 -->
                  <el-form-item :prop="item.event">
                    <!--                    <el-select-->
                    <!--                      v-model="item.event"-->
                    <!--                      filterable-->
                    <!--                      placeholder="请选择"-->
                    <!--                      style="margin-right: 15px; width: 230px"-->
                    <!--                      @change="(val) => resetList(val, index)"-->
                    <!--                    >-->
                    <!--                      <el-option-->
                    <!--                        v-for="i in formData.transferArray.actionList"-->
                    <!--                        :label="i.label"-->
                    <!--                        :value="i.value"-->
                    <!--                      />-->
                    <!--                    </el-select>-->

                    <el-cascader
                      v-model="item.event"
                      :options="formData.transferArray.actionList"
                      :props="{ expandTrigger: 'hover',emitPath:false }"
                      @change="(val) => resetList(val, index)"
                    />
                  </el-form-item>

                  <el-button type="text" @click="addSel(index)">+添加筛选</el-button>
                  <i class="el-icon-close" style="margin-left: 10px" @click="removeHappend(index)" />
                </div>
                <!-- 第二行满足条件部分 -->
                <div v-if="item.conditions.length > 0" class="stepConditions">
                  <div class="satisfid-section">
                    <div class="satisfid-line">并且满足</div>
                    <div class="show-cus-line" />
                    <div v-if="item.conditions.length > 1" class="line-components">
                      <div class="divider" />
                      <el-button class="changeBtn" @click="changeLogic(item)">
                        {{
                          item.relation === 'and' ? '且' : '或'
                        }}
                      </el-button>
                      <div class="divider" />
                    </div>
                    <ul class="ul-list">
                      <li v-for="(it, idx) in item.conditions" :key="it + idx + 'll'">
                        <el-select
                          v-model="it.field"
                          filterable
                          placeholder="请选择"
                          style="margin-right: 15px; width: 230px"
                          @change="
                            (val) => {
                              confirmActFirst(val, index, idx)
                            }
                          "
                        >
                          <el-option
                            v-for="i in formData.transferArray.actionFirstList[index].list"
                            :label="i.label"
                            :value="i.value"
                          />
                        </el-select>
                        <el-select
                          v-model="it.operator"
                          filterable
                          placeholder="请选择"
                          style="margin-right: 15px; width: 230px"
                          @change="
                            (val) => {
                              confirmActSec(val, index, idx)
                            }
                          "
                        >
                          <el-option
                            v-for="i in formData.transferArray.actionSecondList[index].lists[idx].list"
                            :label="i.label"
                            :value="i.value"
                          />
                        </el-select>
                        <!-- 枚举类型 -->
                        <el-select
                          v-if="it.isEnum === 1"
                          v-model="it.param"
                          filterable
                          :multiple="it.useType != 'normal'"
                          style="width: 300px"
                          clearable
                          @change="handleChangeInput"
                        >
                          <el-option
                            v-for="i in formData.transferArray.actionEnumList[index].lists[idx].list"
                            :label="i.label"
                            :value="i.value"
                          />
                        </el-select>
                        <!-- 相等或者正则      -->
                        <el-input
                          v-else-if="it.useType === 'input'"
                          v-model="it.param"
                          style="width: 300px"
                          @input="handleChangeInput"
                        />
                        <!-- 包含或者不包含 -->
                        <MultipInput
                          v-else-if="it.useType === 'a-select'"
                          :tags="it.param"
                          style="width: 300px"
                          @emitInput="(val) => emitActionInput(val, index, idx)"
                        />

                        <!-- 时间选择器 -->
                        <div v-else-if="it.useType === 'datetime'" style="display: inline-block">
                          <el-time-picker
                            v-model="it.tempParam1"
                            style="width: 150px"
                            value-format="HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围"
                          />至
                          <el-time-picker
                            v-model="it.tempParam2"
                            style="width: 150px"
                            value-format="HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围"
                          />
                        </div>

                        <!-- 关联资源表 -->
                        <el-select v-else v-model="it.refResource" filterable style="width: 300px">
                          <el-option
                            v-for="i in formData.transferArray.resourceList"
                            :label="i.label"
                            :value="i.value"
                          />
                        </el-select>

                        <i
                          class="el-icon-close"
                          style="margin-left: 10px"
                          @click="removeConditon(index, idx)"
                        />
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- 中间三个选择框部分 -->
                <section v-if="item.done === true" style="margin-left: 33px">
                  <el-cascader
                    v-model="item.tempArr"
                    style="width: 400px"
                    :options="formData.transferArray.cascadeList[index].list"
                    :props="{ expandTrigger: 'hover' }"
                  />
                  <el-select
                    v-model="item.operator"
                    filterable
                    placeholder="请选择"
                    style="margin: 0 15px; width: 230px"
                    @change="(val) => confirmOperate(val, item)"
                  >
                    <el-option
                      v-for="i in formData.transferArray.secOperateList"
                      :label="i.label"
                      :value="i.value"
                    />
                  </el-select>

                  <!-- 关联资源表 -->
                  <el-select
                    v-if="item.useType === 'outer'"
                    v-model="item.refResource"
                    filterable
                    style="width: 200px"
                  >
                    <el-option
                      v-for="i in formData.transferArray.resourceList"
                      :label="i.label"
                      :value="i.value"
                    />
                  </el-select>
                  <!-- 计数器 -->
                  <el-input-number
                    v-else
                    v-model="item.param"
                    :min="0"
                    style="width: 100px"
                    controls-position="right"
                  />
                </section>
                <!-- 属性分类部分 -->
                <section v-for="(flr, fidx) in item.attr" class="floor2">
                  <div v-if="fidx == 0" style="display: flex; align-items: center">
                    <div class="floor2_son info">按属性分组</div>
                    <el-tooltip placement="bottom">
                      <div slot="content">可按照行为数据的某些属性进行分组，支持多选或不选</div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </div>
                  <el-form-item
                    :prop="flr.group"
                    :style="{ marginLeft: fidx > 0 ? '110px' : '10px' }"
                  >
                    <el-select
                      v-model="flr.group"
                      filterable
                      placeholder="请选择"
                      style="margin-right: 15px; width: 150px"
                      @change="handleChange"
                    >
                      <el-option
                        v-for="i in formData.transferArray.groupList[index].list"
                        :label="i.label"
                        :value="i.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-button v-if="fidx == 0" type="text" @click="addGroup(index)">+添加分组</el-button>
                  <i
                    v-if="fidx > 0"
                    class="el-icon-close"
                    style="margin-left: 10px"
                    @click="removeGroup(index, fidx)"
                  />
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import MultipInput from './multipInput.vue'
import { changeAction } from '@/views/icp/rule/utils/rule'
export default {
  components: { MultipInput },
  props: {
    form: {
      type: Object,
      default: () => {
        return {
          // 行为
          action: {
            relation: 'and',
            time: undefined,
            conditions: [
              {
                time: '',
                done: true,
                time1: 1,
                param: 2,
                relation: 'and',
                conditions: [{ attr: [{}] }]
              }
            ]
          },
          // 属性
          property: {
            relation: 'and',
            attribute: []
          }
        }
      }
    }
  },
  data() {
    return {
      // 表单数据

      //   是否展示实体属性
      showAttr: true,
      // 是否展示实体行为
      showAction: true,

      // 时间列表
      timeList: [
        {
          label: '近一小时',
          value: '1h'
        },
        {
          label: '近一天',
          value: '1d'
        },
        {
          label: '近一周',
          value: '1w'
        },
        {
          label: '近一月',
          value: '1m'
        },
        {
          label: '自定义',
          value: 'auto'
        }
      ]
    }
  },
  computed: {
    letters() {
      const arr = []
      for (var i = 0; i < 26; i++) {
        arr.push(String.fromCharCode(65 + i))
      }
      return arr
    },
    formData() {
      return this.form
    }
  },
  watch: {

  },
  mounted() {
    this.exportObj()
  },
  methods: {
    // 
    handleChange(){
      this.$forceUpdate()
    },
    handleChangeInput() {
      this.$forceUpdate()
    },
    // 处理行为第一步数据
    formatting(val, arr, it, typevalue, index, idx) {
      if (val) {
        const types = arr.filter(i => {
          return i.value === val
        })
        it.isEnum = types[0].isEnum
        it.valueType = types[0].type
        it.type = typevalue

        if (typevalue === 'profile') {
          // 判断是否可枚举
          if (it.isEnum == 0) {
            this.formData.transferArray.secondList[index].lists[
              idx
            ].list = this.formData.transferArray.typeOptions.filter(ii => {
              return ii.type === it.valueType || ii.value.includes('baseline')
            })
          } else {
            this.formData.transferArray.secondList[index].lists[
              idx
            ].list = this.formData.transferArray.typeOptions.filter(ii => {
              return ii.type === 'json' || ii.value.includes('baseline')
            })

            it.useType = 'enum'
            // 获取第三个列表值
            this.formData.transferArray.enumList[index].lists[idx].list = types[0].enumList.map(s => {
              return {
                value: s.dictValue,
                label: s.dictKey,
                propId: s.groupId,
                id: s.id,
                type: s.type
              }
            })
          }
        } else {
          // 判断是否可枚举
          if (it.isEnum == 0) {
            this.formData.transferArray.actionSecondList[index].lists[
              idx
            ].list = this.formData.transferArray.typeOptions.filter(ii => {
              return ii.type === it.valueType || ii.value.includes('baseline')
            })
          } else {
            this.formData.transferArray.actionSecondList[index].lists[
              idx
            ].list = this.formData.transferArray.typeOptions.filter(ii => {
              return ii.type === 'json' || ii.value.includes('baseline')
            })
            it.useType = 'enum'
            // 获取第三个列表值
            this.formData.transferArray.actionEnumList[index].lists[idx].list = types[0].enumList.map(s => {
              return {
                value: s.dictValue,
                label: s.dictKey,
                propId: s.groupId,
                id: s.id,
                type: s.type
              }
            })
          }
        }
      }
    },
    // 处理第二步数据
    formatActSec(val, it, typevalue,index,idx) {
      if (typeof val === 'object') return
      if (it.isEnum == 0) {
        if (typevalue === 'filter') {
          if (val === 'equal' || val === 'regex' || val === 'len_gt') {
            it.useType = 'input'
          } else if (val === 'in' || val === 'not_in') {
            it.useType = 'a-select'
          } else if (val === 'in_time_range') {
            it.useType = 'datetime'
          } else {
            it.useType = 'outer'
          }
        } else {
          if (val === 'equal' || val === 'regex') {
            it.useType = 'input'
          } else if (val === 'in' || val === 'not_in') {
            it.useType = 'a-select'
          } else {
            it.useType = 'outer'
          }
        }
      } else {
        if (val !== 'equal') {
          it.useType = ''
        } else {
          it.useType = 'normal'
        }
      }
      if(val.includes('baseline')){
          it.useType = 'normal'
          this.formData.transferArray.actionEnumList[index].lists[idx].list=this.formData.transferArray.baselines
        }
    },
    //  修改实体属性第一行的值
    confirmFirst(val, index, idx) {
      const it = this.formData.property.conditions[index].conditions[idx]
      this.formatting(val, this.formData.transferArray.attrList, it, 'profile', index, idx)
      it.operator = ''
      it.param = undefined
      it.refResource = ''
    },
    // 修改属性第二项值
    confirmSec(val, index, idx) {
      const it = this.formData.property.conditions[index].conditions[idx]
      this.formatActSec(val, it, 'profile',index,idx)
      it.refResource = ''
      if (val === 'in' || val === 'not_in') {
        it.param = []
      } else {
        it.param = ''
      }
      it.refResource = ''
    },
    // 属性多选组件返回的值
    emitInput(val, index, idx) {
      this.formData.property.conditions[index].conditions[idx].param = val
    },
    // 修改实体事件
    async resetList(val, index) {
      await changeAction(val, index, this.formData.transferArray, 'batch')
      this.formData.action.conditions[index].conditions.forEach(item => {
        item.field = ''
        item.operator = ''
        item.param = undefined
        item.refResource = ''
      })
      this.exportObj()
    },
    // 修改实体行为组第一项值
    confirmActFirst(val, index, idx) {
      const it = this.formData.action.conditions[index].conditions[idx]
      this.formatting(val, this.formData.transferArray.actionFirstList[index].list, it, 'filter', index, idx)
      it.operator = ''
      it.param = undefined
      it.refResource = ''
    },
    // 修改实体行为组第2项值
    confirmActSec(val, index, idx) {
      const it = this.formData.action.conditions[index].conditions[idx]

      this.formatActSec(val, it, 'filter',index,idx)
      if (val === 'in' || val === 'not_in') {
        it.param = []
      } else {
        it.param = ''
      }
      it.refResource = ''
    },
    // 最后是计数器还是选择资源表
    confirmOperate(val, item) {
      if (val.indexOf('ref_') != -1) {
        item.useType = 'outer'
      } else {
        item.useType = ''
      }
      item.refResource = ''
      item.param = ''
      item.params = ''
    },
    // 行为多选组件返回的值
    emitActionInput(val, index, idx) {
      this.formData.action.conditions[index].conditions[idx].param = val
    },
    // 检验实体属性是否填全
    testAttr() {
      const isFilled = this.formData.property.conditions.every(item => {
        const it = item.conditions[0]
        return it.field && it.operator && (it.param?.toString().length || it.refResource)
      })
      if (!isFilled) {
        this.$message.warning('实体属性含有空白项未填全')
        return false
      } else {
        return true
      }
    },
    // 增加实体属性
    addAttr() {
      const continueIt = this.testAttr()
      if (!continueIt) return
      this.formData.property.conditions.push({
        conditions: [
          {
            field: '',
            operator: '',
            param: undefined,
            type: '',
            useType: '',
            refResource: ''
          }
        ],
        relation: 'and'
      })
      this.formData.transferArray.secondList.push({ lists: [{ list: [] }] })
      this.formData.transferArray.enumList.push({ lists: [{ list: [] }] })
      this.exportObj()
    },
    // 删除属性组
    removeAttrConditon(index, idx) {
      this.formData.property.conditions[index].conditions.splice(idx, 1)
      // 删除列表数组
      this.formData.transferArray.secondList[index].lists.splice(idx, 1)
      this.formData.transferArray.enumList[index].lists.splice(idx, 1)
      if (this.formData.property.conditions[index].conditions.length == 0) {
        this.formData.property.conditions.splice(index, 1)
        this.formData.transferArray.secondList.splice(index, 1)
        this.formData.transferArray.enumList.splice(index, 1)
      }
    },
    // 添加实体属性下面的小组
    addContion(index) {
      this.formData.property.conditions[index].conditions.push({
        field: '',
        operator: '',
        type: '',
        param: undefined,
        useType: '',
        refResource: ''
      })
      this.formData.transferArray.secondList[index].lists.push({ list: [] })
      this.formData.transferArray.enumList[index].lists.push({ list: [] })
    },
    // 修改文字
    // changeHappen(data, index) {
    //   if (index == 0) return;
    //   data.happends = data.happends === "发生过" ? "未发生" : "发生过";
    // },
    // 验证添加组
    testGroup() {
      const isFilled = this.formData.action.conditions.every(item => {
        const attrFilled = item?.attr ? item.attr.every(it => it.group || it.groupType) : false
        const actionFilled = this.testAction(item.conditions)
        const { temptime, event, done, operator, refResource, param, tempArr } = item

        return attrFilled && actionFilled && temptime && event && ((done && operator && tempArr.length && (param?.toString().length || refResource)) || !done)
      })
      if (!isFilled) {
        this.$message.warning('请补全实体行为组')
        return false
      } else {
        return true
      }
    },
    // 增加组
    addHappend() {
      const continueIt = this.testGroup()
      if (!continueIt) return
      this.formData.action.conditions.push({
        time: '',
        done: true,
        conditions: [],
        relation: 'and',
        attr: [{}],
        alias: '',
        event: '',
        aggregator: '',
        key: '',
        operator: '',
        useType: '',
        refResource: ''
      })
      this.formData.transferArray.cascadeList.push({ list: [] })
      this.formData.transferArray.actionFirstList.push({ list: [] })
      this.formData.transferArray.actionSecondList.push({
        lists: [{ list: [] }]
      })
      this.formData.transferArray.actionEnumList.push({
        lists: [{ list: [] }]
      })
      this.formData.transferArray.groupList.push({ list: [] })
    },
    //   更改判断逻辑
    changeLogic(item) {
      item.relation = item.relation === 'and' ? 'or' : 'and'
    },
    // 测试实体行为并且部分是否填全
    testAction(item) {
      return item.every(it => {
        return it.field && it.operator && (it.param?.toString().length || it.refResource || (it.tempParam1 && it.tempParam2))
      })
    },
    //   添加条件
    addSel(index) {
      const isFilled = this.testAction(this.formData.action.conditions[index].conditions)
      if (!isFilled) {
        this.$message.warning('实体行为含有空白项未填全')
        return
      }
      this.formData.action.conditions[index].conditions.push({
        field: '',
        operator: '',
        param: undefined,
        type: '',
        useType: '',
        refResource: ''
      })

      this.formData.transferArray.actionSecondList[index].lists.push({
        list: []
      })
      this.formData.transferArray.actionEnumList[index].lists.push({
        list: []
      })
    },
    // 添加属性组
    addGroup(index) {
      const isFilled = this.formData.action.conditions[index].attr.every(item => item.group || item.groupType)
      if (!isFilled) {
        this.$message.warning('请先选择空白属性')
        return
      }

      if (this.formData.action.conditions[index].attr.length > 2) {
        this.$message.warning('不能添加超过3组')
        return
      }
      this.formData.action.conditions[index].attr.push({
        group: '',
        groupType: ''
      })
    },
    // 移除属性组
    removeGroup(index, fidx) {
      this.formData.action.conditions[index].attr.splice(fidx, 1)
    },
    //   删除组
    removeHappend(index) {
      this.formData.action.conditions.splice(index, 1)
      this.formData.transferArray.cascadeList.splice(index, 1)
      this.formData.transferArray.actionFirstList.splice(index, 1)
      this.formData.transferArray.actionSecondList.splice(index, 1)
      this.formData.transferArray.actionEnumList.splice(index, 1)
      this.formData.transferArray.groupList.splice(index, 1)
      this.exportObj()
    },
    // 移除满足条件
    removeConditon(index, idx) {
      this.formData.action.conditions[index].conditions.splice(idx, 1)
      this.formData.transferArray.actionSecondList[index].lists.splice(idx, 1)
      this.formData.transferArray.actionEnumList[index].lists.splice(idx, 1)
    },
    // 保存表单
    submitLabel() {
      const continueIt = this.testGroup() && this.testAttr()
      if (!continueIt) return

      this.formData.refResource = []
      this.formData.action.conditions.forEach((item, index) => {
        item.alias = this.letters[index]
        item.time = item.temptime === 'auto' ? item.time : item.temptime
        if (item.tempArr) {
          item.aggregator = item.tempArr[0]
          item.key = item.tempArr[1]
        }
        // 整理params格式
        if (item.param || item.param == 0) {
          if (Array.isArray(item.param)) {
            item.params = item.param
          } else {
            // 非数组格式
            item.params = [item.param]
          }
        }
        // 整合资源列表
        if (item.refResource) {
          this.formData.refResource.push(item.refResource)
        }
        item.conditions.forEach(it => {
          if (it.refResource) {
            this.formData.refResource.push(it.refResource)
            it.params = [it.refResource]
          } else if (it.tempParam1 && it.tempParam2) {
            it.params = [it.tempParam1 + '-' + it.tempParam2]
          }
          // 数组格式
          else {
            if (Array.isArray(it.param)) {
              it.params = it.param
            } else {
              // 非数组格式
              it.params = [it.param]
            }
          }
        })
      })
      this.formData.property.conditions.forEach((item, index) => {
        item.conditions.forEach(it => {
          if (it.refResource) {
            this.formData.refResource.push(it.refResource)
            it.params = [it.refResource]
          } else if (it.param || it.param == 0) {
            // 数组格式
            if (Array.isArray(it.param)) {
              it.params = it.param
            } else {
              // 非数组格式
              it.params = [it.param]
            }
          }
        })
      })
      this.formData.refResource = Array.from(new Set(this.formData.refResource))
      const rule = {
        rule: this.formData
      }
      return new Promise((resolve, reject) => {
        resolve(rule)
      })
    },
    // 修改传递给desc的值
    exportObj() {
      const obj = {
        behavior_field_data: []
      }
      // 所有的子项目集合

      this.formData.transferArray.attrList.forEach(item => {
        obj.behavior_field_data.push(`#{${item.label}}`)
      })

      if (this.formData.action.conditions.length > 0) {
        this.formData.action.conditions.forEach((item, index) => {
          this.formData.transferArray.actionFirstList[0].list.forEach((i, idx) => {
            obj.behavior_field_data.push(`#{${this.letters[index]}.${i.name}}`)
            if (JSON.stringify(obj.behavior_field_data).search(`${this.letters[index]}.分析时间段}`) === -1) {
              obj.behavior_field_data.push(`#{${this.letters[index]}.分析时间段}`)
            }
            if (JSON.stringify(obj.behavior_field_data).search(`${this.letters[index]}.聚合值}`) === -1) {
              obj.behavior_field_data.push(`#{${this.letters[index]}.聚合值}`)
            }
          })
        })
      }

      this.$emit('exportObj', obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.dia-form {
  display: flex;
  flex-direction: column;
}
.margin20 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  &:last-of-type {
    margin-bottom: 0;
  }
}
.total-cotnet {
  display: flex;
  flex-direction: row;
  width: 100%;
  &.header {
    padding: 10px;
    border: 1px dotted #eaeaea;
  }

  .line-components {
    display: flex;
    flex-direction: column;
    width: 24px;
    .divider {
      margin: 0 auto;
      height: calc(50% - 12px);
      width: 1px;
      background-color: #cfe4fe;
    }
    .changeBtn {
      width: 24px;
      height: 24px;
      text-align: center;
      padding: 0;
      background-color: #cfe4fe;
      color: #2979ff;
    }
  }
}

.rule-label {
  border: 1px solid #e2e2e2;
  padding: 20px;
  margin: 20px 0;
  width: calc(100% - 20px);
  margin-left: 20px;

  section {
    display: flex;
    margin: 20px 0;
    align-items: center;
  }
  .small-head {
    display: flex;
    justify-content: space-between;
    .small-head-btn {
      text-align: center;
      border-radius: 2px;
      padding: 0;
      border: 1px solid #95989c;
      align-content: center;
      margin-right: 10px;
    }
  }
  .floor1 {
    margin-top: 20px;

    height: 32px;

    .floor1_son {
      height: 32px;
      line-height: 32px;
      margin: 0 8px;
    }
  }
  .floor3 {
    padding-left: 0px;
    .happend {
      display: flex;
      align-items: center;
      .floor3_son {
        margin-right: 8px;
        line-height: 32px;
        text-align: center;
      }
      .number-tips {
        width: 24px;
        height: 24px;
        line-height: 20px;
        border-radius: 2px;
        padding: 3px 7px;
        background: #2979ff;
        color: #fff;
        margin-right: 10px;
        text-align: center;
      }
      //   & > * {
      //     margin-bottom: 20px;
      //   }
    }
    .stepConditions {
      margin: 20px 0;
      // padding-left: 30px;
      width: 100%;
      .satisfid-section {
        display: flex;
        .satisfid-line {
          width: 70px;
          display: flex;
          align-items: center;
          color: #95989c;
          margin-right: 10px;
        }
        .show-cus-line {
          width: 2px;
          background-color: #2979ff;
          margin-right: 12px;
        }

        .ul-list {
          width: 100%;
          padding-left: 10px;
          margin: 0;
          & > li {
            list-style: none;
            text-align: left;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .floor2 {
    padding-left: 36px;

    .floor2_son {
      margin-right: 8px;
      line-height: 32px;
    }
  }
  .info {
    padding: 0 5px;
    height: 32px;
    background: #f0f0f0;
    border-radius: 2px;
    color: #95989c;
  }
  .arrsel {
    display: flex;
    align-items: center;
  }
  .no-pointer {
    cursor: not-allowed;
  }
}
::v-deep {
  .el-form-item__content {
    line-height: 24px;
  }
}
</style>
<style lang="scss">
.el-dialog__wrapper {
  .rule-label {
    .el-form-item {
      margin-bottom: 0 !important;
    }
  }
}
</style>
